<template>
	<div class="system-user">
		<div class="pane">
			<!-- 组织架构 -->
			<div class="dept" :class="[isExpand ? '_expand' : '_collapse']">
				<gdshop-category-left-tree
					@row-click="onDeptRowClick"
					@list-change="onDeptListChange"
					:dataType="categoryTypeId"
				/>
			</div>

			<!-- 成员列表 -->
			<div class="user">
				<div class="header">
					<div class="icon" @click="deptExpand">
						<i class="el-icon-arrow-left" v-if="isExpand"></i>
						<i class="el-icon-arrow-right" v-else></i>
					</div>

					<span>幻灯片列表 - {{ treeTitle }}</span>
				</div>

				<div class="container">
					<cl-crud :ref="setRefs('crud')" :on-refresh="onRefresh" @load="onLoad">
						<el-row type="flex">
							<cl-refresh-btn />
							<cl-add-btn />
							<cl-multi-delete-btn />
							<el-button
								v-permission="service.cms.article.permission.move"
								size="mini"
								type="success"
								:disabled="selects.ids.length == 0"
								@click="toMove()"
								>转移</el-button
							>
							<cl-flex1 />
							<cl-search-key />
						</el-row>

						<el-row>
							<cl-table
								:ref="setRefs('table')"
								v-bind="table"
								@selection-change="onSelectionChange"
							>
								<template #header-create_at="{ scope }">
									<div>创建时间</div>
									<div>修改时间</div>
								</template>

								<!-- 头像 -->
								<template #column-cover="{ scope }">
									<gdshop-cover :modelValue="scope.row.cover" :baseUrl="baseUrl" />
								</template>

								<template #column-create_at="{ scope }">
									<div>{{ showDateTime(scope.row.create_at) }}</div>
									<div>{{ showDateTime(scope.row.update_at) }}</div>
								</template>

								<!-- 单个转移 -->
								<template #slot-move-btn="{ scope }">
									<el-button
										v-permission="service.cms.article.permission.move"
										type="text"
										size="mini"
										@click="toMove(scope.row)"
										>转移</el-button
									>
								</template>
							</cl-table>
						</el-row>

						<el-row type="flex">
							<cl-flex1 />
							<cl-pagination />
						</el-row>

						<cl-upsert
							:ref="setRefs('upsert')"
							:items="upsert.items"
							:on-submit="onUpsertSubmit"
						>
							<template #slot-category_id="{ scope }">
								<el-cascader
									v-model="scope.category_id"
									:options="categoryIdOptions"
									:props="{
										value: 'id',
										label: 'cat_name',
										emitPath: false,
										checkStrictly: true
									}"
								/>
							</template>

							<template #slot-cover="{ scope }">
								<cover-select v-model="scope.cover" :baseUrl="baseUrl"></cover-select>
							</template>
						</cl-upsert>
					</cl-crud>
				</div>
			</div>
		</div>

		<!-- 分类移动 -->
		<gdshop-category-move
			:ref="setRefs('category-move')"
			:categoryTypeId="categoryTypeId"
			moveFnOne="cms"
			moveFnTwo="slide"
			@success="refresh({ page: 1 })"
		/>
	</div>
</template>

<script lang="ts">
import { computed, defineComponent, inject, reactive, ref, watch } from "vue";
import { useStore } from "vuex";
import { useRefs } from "/@/core";
import { Table, Upsert } from "/$/crud/types";
import { deepTree } from "/@/core/utils";
import dayjs from "dayjs";

export default defineComponent({
	name: "cms-slide",
	setup() {
		const service = inject<any>("service");
		const store = useStore();
		const { refs, setRefs } = useRefs();

		const categoryTypeId = ref(2);

		// 是否展开
		const isExpand = ref<boolean>(true);

		// 选择项
		const selects = reactive<any>({
			dept: {},
			ids: []
		});

		const treeTitle = ref<string>("全部");

		// 部门列表
		const dept = ref<any[]>([]);
		// 表格配置
		const table = reactive<Table>({
			props: {
				"default-sort": {
					prop: "create_at",
					order: "desc"
				}
			},
			columns: [
				{
					type: "selection",
					width: 60
				},
				{
					prop: "title",
					label: "标题"
				},
				{
					prop: "cat_name",
					label: "分类",
					width: 150
				},
				{
					prop: "cover",
					label: "图片",
					width: 130
				},
				{
					prop: "create_at",
					label: "创建时间",
					width: 140
				},
				{
					type: "op",
					buttons: ["slot-move-btn", "edit", "delete"],
					width: 160
				}
			]
		});

		// 分类数据
		const categoryIdOptions = ref<any[]>([]);

		service.cms.category.list({ type: categoryTypeId.value }).then((res: any[]) => {
			categoryIdOptions.value = deepTree(res, "parent_id");
		});

		// 先取到图片地址前缀
		const baseUrl = ref("");
		async function getBaseUrl() {
			await service.gdshop.attachment.getBaseUrl().then((res) => {
				baseUrl.value = res.base_url;
			});
			return baseUrl;
		}
		getBaseUrl();

		// 新增、编辑配置
		const upsert = reactive<Upsert>({
			title: "测试",
			width: "1200px",
			dialog: {
				props: {
					title: "测试",
					width: "1200px"
				}
			},
			items: [
				{
					prop: "title",
					label: "标题",
					span: 24,
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写标题"
						}
					},
					rules: {
						required: true,
						message: "标题不能为空"
					}
				},
				{
					prop: "category_id",
					label: "分类",
					span: 24,
					component: {
						name: "slot-category_id"
					},
					rules: {
						required: true,
						message: "请选择分类"
					}
				},
				{
					prop: "cover",
					label: "图片",
					span: 12,
					component: {
						name: "slot-cover"
					}
				},
				{
					prop: "jump_url",
					label: "跳转URL",
					span: 24,
					component: {
						name: "el-input",
						props: {
							placeholder: "请填写跳转URL"
						}
					}
				}
			]
		});

		// 浏览器信息
		const browser = computed(() => store.getters.browser);

		// 监听屏幕大小变化
		watch(
			() => browser.value.isMini,
			(val: boolean) => {
				isExpand.value = !val;
			},
			{
				immediate: true
			}
		);

		// crud 加载
		function onLoad({ ctx, app }: any) {
			ctx.service(service.cms.slide).done();
			app.refresh();
		}

		// 刷新列表
		function refresh(params: any) {
			refs.value.crud.refresh(params);
		}

		// 刷新监听
		async function onRefresh(params: any, { next, render }: any) {
			const { list } = await next(params);

			render(list);
		}

		// 提交钩子
		function onUpsertSubmit(_: boolean, data: any, { next }: any) {
			next({
				...data,
				type: categoryTypeId.value
			});
		}

		// 多选监听
		function onSelectionChange(selection: any[]) {
			selects.ids = selection.map((e) => e.id);
		}

		// 部门选择监听
		function onDeptRowClick({ item, ids }: any) {
			selects.dept = item;
			treeTitle.value = item.cat_name;
			refresh({
				page: 1,
				categoryIds: ids
			});

			// 收起
			if (browser.value.isMini) {
				isExpand.value = false;
			}
		}

		// 部门列表监听
		function onDeptListChange(list: any[]) {
			dept.value = list;
		}

		// 是否显示部门
		function deptExpand() {
			isExpand.value = !isExpand.value;
		}

		// 移动成员
		async function toMove(e?: any) {
			let ids = [];

			if (!e) {
				ids = selects.ids;
			} else {
				ids = [e.id];
			}
			console.log(refs.value["category-move"]);
			refs.value["category-move"].toMove(ids);
		}

		return {
			service,
			refs,
			isExpand,
			selects,
			dept,
			table,
			upsert,
			browser,
			setRefs,
			onLoad,
			refresh,
			onRefresh,
			onUpsertSubmit,
			onSelectionChange,
			onDeptRowClick,
			onDeptListChange,
			deptExpand,
			toMove,
			categoryIdOptions,
			treeTitle,
			categoryTypeId,
			baseUrl
		};
	},
	methods: {
		showDateTime(_time) {
			if (!_time) {
				return "-";
			}
			return dayjs.unix(_time).format("YYYY-MM-DD HH:mm:ss");
		}
	}
});
</script>

<style lang="scss" scoped>
.system-user {
	.pane {
		display: flex;
		height: 100%;
		width: 100%;
		position: relative;
	}

	.dept {
		height: 100%;
		width: 300px;
		max-width: calc(100% - 50px);
		background-color: #fff;
		transition: width 0.3s;
		margin-right: 10px;
		flex-shrink: 0;

		&._collapse {
			margin-right: 0;
			width: 0;
		}
	}

	.user {
		width: calc(100% - 310px);
		flex: 1;

		.header {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 40px;
			position: relative;
			background-color: #fff;

			span {
				font-size: 14px;
				white-space: nowrap;
				overflow: hidden;
			}

			.icon {
				position: absolute;
				left: 0;
				top: 0;
				font-size: 18px;
				cursor: pointer;
				background-color: #fff;
				height: 40px;
				width: 80px;
				line-height: 40px;
				padding-left: 10px;
			}
		}
	}

	.dept,
	.user {
		overflow: hidden;
		.container {
			height: calc(100% - 40px);
		}
	}

	@media only screen and (max-width: 768px) {
		.dept {
			width: calc(100% - 100px);
		}
	}
}
</style>
